<template>
  <div class="page-test">
    <!-- 头部开始 -->
    <div class="toppos">
      <Row>
        <!-- logo -->
        <i-col span="5">
          <img src />
        </i-col>
        <!-- 考试科目 -->
        <i-col span="15">
          <p class="t1">高等数学 - 期末测试1</p>
          <p class="t2">《UI设计-全链路培养》</p>
        </i-col>
        <i-col span="4">
          <i-button>重新考试</i-button>
        </i-col>
      </Row>
    </div>
    <!-- 主体部分 -->
    <div class="bodypos">
      <div class="transcript">
        <div class="portrait">
          <img :src="lists.navcli" alt />
        </div>
        <ul>
          <li class="t1">{{lists.name}}</li>
          <li class="t2">
            您本次考试《
            <p>{{lists.topic}}</p>》成绩为
          </li>
          <li class="t3">{{lists.score}}分</li>
          <li class="t4">{{lists.evaluation}}</li>
          <li class="t5">
            <p>正确率</p>
            {{lists.rights}}&nbsp;&nbsp;
            <p>平均分</p>
            {{lists.average}}分&nbsp;&nbsp;
            <p>排名数</p>
            {{lists.ranking}}%
          </li>
        </ul>
        <div class="printbtn">
          <i-button>打印</i-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: {
        navcli:
          "//10.url.cn/eth/ajNVdqHZLLCbyFVeIaIP9GRSlvyx4QmqtBA7Xorehib2QBShljCCJyF48arWCUY6Miaxly5N5a6wE/130",
        name: "曾kier ",
        topic: "高等数学 - 期末测试1",
        score: 52,
        evaluation: "您本次考试刚好及格哦，还要继续加油努力哦！",
        rights: 60,
        average: 61.5,
        ranking: 60
      }
    };
  }
};
</script>

<style lang='scss'>
.page-test {
  width: 100%;
  height: 700px;
  .toppos {
    width: 1175px;
    margin: 20px auto;
    .ivu-row {
      width: 100%;
      height: 76px;
      margin-bottom: 20px;
      .ivu-col-span-5 {
        img {
          width: 100%;
          height: 66px;
          border-radius: 2px;
        }
      }
      .ivu-col-span-15 {
        text-align: center;
        .t1 {
          font-family: SourceHanSansSC;
          font-weight: 700;
          font-size: 22px;
          color: rgb(16, 16, 16);
          font-style: normal;
          letter-spacing: 2px;
          line-height: 33px;
          text-decoration: none;
          padding: 5px 0px;
        }
        .t2 {
          font-family: SourceHanSansSC;
          font-weight: 400;
          font-size: 16px;
          color: rgb(16, 16, 16);
          font-style: normal;
          letter-spacing: 0px;
          line-height: 26px;
          text-decoration: none;
        }
      }
      .ivu-col-span-4 {
        .ivu-btn {
          width: 150px;
          height: 75px;
          background-color: rgb(86, 142, 240);
          border-color: rgb(187, 187, 187);
          border-width: 1px;
          border-style: solid;
          color: rgb(255, 255, 255);
          border-radius: 4px;
          font-size: 20px;
          padding: 0px;
          text-align: center;
          line-height: 29px;
          font-weight: bold;
          font-style: normal;
          opacity: 1;
        }
      }
    }
    .mark {
      width: 246px;
      height: 66px;
      margin-bottom: 36px;
      border-radius: 2px;
      float: left;
      > img {
        width: 100%;
        height: 66px;
        border-radius: 2px;
      }
    }
  }
  .bodypos {
    width: 100%;
    height: 100%;
    background-color: #64aeee;
    padding-top: 80px;
    .transcript {
      padding-top: 45px;
      position: relative;
      width: 600px;
      height: 330px;
      margin: 0px auto;
      background-color: #ffffff;
      box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
      .portrait {
        overflow: hidden;
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        left: 249px;
        bottom: 288px;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
        background-color: #ffffff;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .printbtn {
        padding-right: 13px;
        text-align: right;
        .ivu-btn {
          width: 100px;
          height: 40px;
          background-color: rgb(91, 150, 255);
          border-color: rgb(187, 187, 187);
          border-width: 1px;
          border-style: solid;
          color: rgb(255, 255, 255);
          border-radius: 4px;
          font-size: 14px;
          text-align: center;
          font-weight: bold;
          font-style: normal;
          opacity: 1;
        }
      }
    }
    .t1 {
      margin-top: 10px;
      font-family: SourceHanSansSC;
      font-weight: 700;
      font-size: 18px;
      text-align: center;
      color: rgb(16, 16, 16);
      font-style: normal;
      letter-spacing: 0px;
      line-height: 27px;
      text-decoration: none;
    }
    .t2 {
      margin-top: 16px;
      font-family: SourceHanSansSC;
      font-weight: 400;
      font-size: 14px;
      text-align: center;
      color: rgb(16, 16, 16);
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
      > p {
        font-weight: 700;
        display: contents;
      }
    }
    .t3 {
      margin-top: 8px;
      font-family: SourceHanSansSC;
      font-weight: 700;
      font-size: 36px;
      color: rgba(91, 150, 255, 1);
      font-style: normal;
      letter-spacing: 2px;
      text-align: center;
      line-height: 54px;
      text-decoration: none;
    }
    .t4 {
      margin-top: 8px;
      font-family: SourceHanSansSC;
      font-weight: 400;
      font-size: 14px;
      text-align: center;
      color: rgb(16, 16, 16);
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
    }
    .t5 {
      margin-top: 52px;
      font-family: SourceHanSansSC;
      font-weight: 700;
      text-align: center;
      font-size: 16px;
      color: rgb(68, 131, 244);
      font-style: normal;
      letter-spacing: 1px;
      line-height: 24px;
      text-decoration: none;
      > p {
        display: inline-flex;
        font-family: SourceHanSansSC;
        font-weight: 400;
        font-size: 16px;
        color: rgb(16, 16, 16);
        font-style: normal;
        letter-spacing: 1px;
        line-height: 24px;
        text-decoration: none;
      }
    }
  }
}
</style>